<template>
	<view class="page" v-if="!loading">
		<image src="@/static/image/bxxq-bg.png" class="bg-color" mode="aspectFill"></image>

		<z-paging ref="paging" bg-color="rgba(0,0,0,0)">
			<uv-navbar slot="top" bgColor="rgba(0,0,0,0)" :titleStyle="{color: '#ffffff'}" leftIconColor="#ffffff" autoBack
				:fixed="true" title="报修详情" placeholder></uv-navbar>

			<view class="content-box">
				<view class="state">待处理</view>

				<view class="content-item">
					<view class="tips">项目信息</view>
					<view class="cell-box">
						<view class="label">项目名称</view>
						<text class="info" user-select>{{ info.project_name }}</text>
					</view>
					<view class="cell-box">
						<view class="label">项目品牌</view>
						<text class="info" user-select>{{info.brand_name}}</text>
					</view>
					<view class="cell-box">
						<view class="label">项目编号</view>
						<text class="info" user-select>{{info.project_number}}</text>
					</view>
				</view>

				<view class="content-item">
					<view class="tips">报修信息</view>
					<view class="cell-box">
						<view class="label">工单编号</view>
						<view class="info flex-end" @click="copy(info.after_sales_number)">{{info.after_sales_number}}
							<view class="iconfont icon-ic_line_copy24px"></view>
						</view>
					</view>
					<view class="cell-box">
						<view class="label">报修内容</view>
						<text class="info" user-select>{{info.problem_content}}</text>
					</view>
					<view class="cell-box">
						<view class="label">发起人</view>
						<text class="info" user-select>{{info.user_name}}</text>
					</view>
					<view class="cell-box">
						<view class="label">创建时间</view>
						<text class="info" user-select>{{info.created_at}}</text>
					</view>
					<uv-line margin="30rpx 0" color="#F2F2F2"></uv-line>
					<view class="cell-box2">
						<view class="label">图片/视频</view>
						<view class="attachment-box">
							<view class="attachment-item" v-for="(item, idx) in info.after_files" :key="idx" @click="preview(item)">
								<image :src="item.file_url" mode="aspectFill" class="img" v-if="is_img(item.file_suffix) == 'img'">
								</image>
								<view class="video-box" v-if="is_img(item.file_suffix) == 'video'">
									<uv-icon name="play-right-fill" color="#ffffff" size="30rpx"></uv-icon>
								</view>
							</view>
						</view>
					</view>

				</view>

				<view class="content-item">
					<view class="tips">维修信息</view>
					<view class="cell-box">
						<view class="label">维修人员</view>
						<view class="info flex-end" v-if="info.name" @click="call(info.phone)">{{info.name}} <uv-icon
								name="phone-fill" color="#D8D8D8"></uv-icon></view>
						<view class="info" v-else>--</view>
					</view>
					<view class="cell-box">
						<view class="label">完成时间</view>
						<text class="info" user-select>{{info.completion_date || '--'}}</text>
					</view>
					<uv-line margin="30rpx 0" color="#F2F2F2"></uv-line>
					<view :class="info.complete_files.length != 0 ? 'cell-box2' : 'cell-box'">
						<view class="label" style="width: 300rpx;">完成图片/视频</view>
						<view class="info" v-if="info.complete_files.length == 0">--</view>
						<view class="attachment-box">
							<view class="attachment-item" v-for="(item, index) in info.complete_files" :key="index">
								<image :src="item.file_url" mode="aspectFill" class="img" v-if="is_img(item.file_suffix) == 'img'">
								</image>
								<view class="video-box" v-if="is_img(item.file_suffix) == 'video'">
									<uv-icon name="play-right-fill" color="#ffffff" size="30rpx"></uv-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<!-- 文件预览 -->
		<preFileCom :fileObj="fileObj" @onFileSuccess="fileObj=''"></preFileCom>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				info: {},
				fileObj: null,
			}
		},
		onLoad(options) {
			if (options.id) {
				this.getDetail(options.id)
			} else {
				uni.navigateBack({
					delta: 1 // 默认值是1
				});
			}
		},
		methods: {
			is_img(type) {
				let app = getApp()
				let img_type_arr = app.globalData.imgExtensions
				let video_type_arr = app.globalData.videoExtensions

				if (img_type_arr.indexOf(type) != -1) {
					return 'img'
				} else if (video_type_arr.indexOf(type) != -1) {
					return 'video'
				} else {
					return 'other'
				}
			},
			preview(item) {
				this.fileObj = item
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'success'
						})
					}
				})
			},
			call(value) {
				uni.makePhoneCall({
					phoneNumber: value,
					success: () => {
						console.log('拨打电话成功');
					}
				})
			},
			getDetail(id) {
				this.$Api.khAfterSalesDetails({
					id
				}).then(res => {
					console.log(res, '获取详情');
					if (res.code == 200) {
						this.info = res.data
					}
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>